<script setup>
import { ref } from 'vue';
import ChartContainer from '../ChartContainer.vue';

// 生成随机数据
const data = [];
for (let i = 0; i < 100; i++) {
  data.push([
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 40 + 10  // 点的大小
  ]);
}

const option = ref({
  tooltip: {
    position: 'top'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    name: 'X 轴',
    nameLocation: 'end'
  },
  yAxis: {
    type: 'value',
    name: 'Y 轴',
    nameLocation: 'end'
  },
  visualMap: {
    min: 10,
    max: 50,
    dimension: 2,
    orient: 'horizontal',
    right: 10,
    top: 10,
    text: ['大', '小'],
    calculable: true,
    inRange: {
      color: ['#2c3e50', '#3498db']
    }
  },
  series: [
    {
      name: '散点',
      type: 'scatter',
      data: data,
      symbolSize: function (data) {
        return data[2];
      },
      itemStyle: {
        opacity: 0.8
      }
    }
  ]
});
</script>

<template>
  <ChartContainer title="数据分布散点图" :option="option" />
</template>